<!--
  - Copyright (c) 2018.
  - 北京九思金信科技有限公司对该文件内容保留所有权利。
  - 未经许可，不得私自拷贝、传播、发布、引用该文件内容，违者将被追究法律责任。
  -->

<template>
  <div class="quoteCalculate_box">
    <div class="quoteCalculate_head_box">
      <div class="quoteCalculate_head_return" @click="returnHistiy">
        <img src="@/pages/mobile/assets/img/Back@3x.png" alt />
        <span>报价测算{{ qcListDataDom }}</span>
      </div>
      <p>新建报价</p>
      <div
        class="quoteCalculate_save"
        :class="{ quoteCalculate_font_active: calculateEventActive }"
        @click="calculateEvent"
        v-if="calculateEventActive"
      >
        保存
      </div>
      <div class="quoteCalculate_save" v-else>保存</div>
    </div>

    <div class="scroll" ref="scroll">
      <scroll>
        <div class="quoteCalculate_content">
          <div class="quoteCalculate_content_item">
            <h3>请填写报价测算信息</h3>
            <group label-align="right" class="quoteCalculate_item_table">
              <div>
                <div class="quoteCalculate_item_table_sign">
                  <x-icon type="ios-star" size="10"></x-icon>
                </div>
                <div class="quoteCalculate_item_table_span">
                  <span>方案名称</span>
                  <input
                    type="text"
                    v-model="qcListData.QuoteName"
                    placeholder="请输入"
                  />
                  <!-- <i>元</i> -->
                </div>
              </div>
              <div>
                <div class="quoteCalculate_item_table_sign">
                  <x-icon type="ios-star" size="10"></x-icon>
                </div>
                <div class="quoteCalculate_item_table_span">
                  <span>融资金额</span>
                  <input
                    type="text"
                    v-model="qcListData.FinancingAmount"
                    placeholder="请输入"
                  />
                  <!-- <i>元</i> -->
                </div>
              </div>
              <div>
                <div class="quoteCalculate_item_table_sign">
                  <x-icon type="ios-star" size="10"></x-icon>
                </div>
                <datetime
                  class="quoteCalculate_item_table_time dateStyle"
                  title="计划投放日期"
                  v-model="qcListData.PlanLoanDate"
                  placeholder="请选择"
                  value-text-align="left"
                ></datetime>
              </div>

              <div>
                <div class="quoteCalculate_item_table_sign">
                  <x-icon type="ios-star" size="10"></x-icon>
                </div>
                <popup-picker
                  class="quoteCalculate_item_table_select"
                  title="租赁方式"
                  :data="LeaseModeSelect"
                  placeholder="请选择"
                  show-name
                  v-model="qcListData.LeaseMode"
                  value-text-align="left"
                ></popup-picker>
              </div>

              <div>
                <div class="quoteCalculate_item_table_sign">
                  <x-icon type="ios-star" size="10"></x-icon>
                </div>
                <popup-picker
                  class="quoteCalculate_item_table_select"
                  title="租赁资产类型"
                  :data="AssetsNatureSelect"
                  placeholder="请选择"
                  show-name
                  v-model="qcListData.AssetsNature"
                  value-text-align="left"
                ></popup-picker>
              </div>

              <div>
                <div class="quoteCalculate_item_table_sign">
                  <x-icon type="ios-star" size="10"></x-icon>
                </div>
                <popup-picker
                  class="quoteCalculate_item_table_select"
                  title="报价算法"
                  :data="LeaseAlgorithmSelect"
                  placeholder="请选择"
                  show-name
                  v-model="qcListData.LeaseAlgorithm"
                  value-text-align="left"
                ></popup-picker>
              </div>

              <div>
                <div class="quoteCalculate_item_table_sign">
                  <x-icon type="ios-star" size="10"></x-icon>
                </div>
                <popup-picker
                  class="quoteCalculate_item_table_select"
                  title="收租周期"
                  :data="LeaseCycleSelect"
                  placeholder="请选择"
                  show-name
                  v-model="qcListData.LeaseCycle"
                  value-text-align="left"
                ></popup-picker>
              </div>

              <div>
                <div class="quoteCalculate_item_table_sign">
                  <x-icon type="ios-star" size="10"></x-icon>
                </div>
                <div
                  class="quoteCalculate_item_table_span quoteCalculate_item_table_border"
                >
                  <span>期限（月）</span>
                  <input
                    type="text"
                    v-model="qcListData.LeaseTerm"
                    placeholder="请输入"
                  />
                </div>
              </div>

              <div>
                <div class="quoteCalculate_item_table_sign">
                  <x-icon type="ios-star" size="10"></x-icon>
                </div>
                <div
                  class="quoteCalculate_item_table_span quoteCalculate_item_table_border"
                >
                  <span>报价利率</span>
                  <input
                    type="text"
                    v-model="qcListData.interestRate"
                    placeholder="请输入比例"
                  />
                  <!-- <i>%</i> -->
                </div>
              </div>

              <div>
                <div class="quoteCalculate_item_table_sign">
                  <!-- <x-icon type="ios-star" size="10"></x-icon> -->
                </div>
                <div
                  class="quoteCalculate_item_table_span quoteCalculate_item_table_border"
                >
                  <span>手续费比例</span>
                  <input
                    type="text"
                    v-model="qcListData.PoundageRatio"
                    placeholder="请输入比例"
                  />
                  <!-- <i>%</i> -->
                </div>
              </div>

              <div>
                <div class="quoteCalculate_item_table_sign">
                  <!-- <x-icon type="ios-star" size="10"></x-icon> -->
                </div>
                <div class="quoteCalculate_item_table_span">
                  <span>风险金比例</span>
                  <input
                    type="text"
                    v-model="qcListData.DepositRatio"
                    placeholder="请输入比例"
                  />
                  <!-- <i>%</i> -->
                </div>
              </div>
              <div>
                <div class="quoteCalculate_item_table_sign">
                  <!-- <x-icon type="ios-star" size="10"></x-icon> -->
                </div>
                <div
                  class="quoteCalculate_item_table_span quoteCalculate_item_table_border"
                >
                  <span>留购价金额</span>
                  <input
                    type="text"
                    v-model="qcListData.PurchasePrice"
                    placeholder="请输入"
                  />
                </div>
              </div>
            </group>
          </div>
        </div>
      </scroll>
    </div>
    <qc-result
      v-if="QcResultBox"
      :resultDataId="QcResultInfo"
      @QcResultClose="QcResultBoxClose"
    ></qc-result>

    <toast
      v-model="PositionValue"
      type="text"
      :time="showPositionValuetime"
      is-show-mask
      :text="showPositionValuetext"
      :position="position"
    ></toast>
  </div>
</template>
<script>
import {
  GroupTitle,
  Group,
  Cell,
  XInput,
  Selector,
  PopupPicker,
  Datetime,
  XNumber,
  ChinaAddressData,
  XAddress,
  XTextarea,
  XSwitch,
  Toast,
  XButton
} from "vux";
import "./QuoteCalculate.less";
import Scroll from "@/pages/mobile/assets/js/JoysScroll/JoysScroll";
import QcResult from "./QuoteCalculateResult.vue";
export default {
  components: {
    Group,
    GroupTitle,
    Cell,
    XInput,
    Selector,
    PopupPicker,
    XAddress,
    Datetime,
    XNumber,
    XTextarea,
    XSwitch,
    QcResult,
    Scroll,
    Toast,
    XButton
  },
  data () {
    return {
      QcResultBox: false,
      QcResultInfo: "",
      qcListDataDomNub: "", //必填项个数
      PositionValue: false, // 图片识别失败信息提示信息提示
      showPositionValuetime: 2000, //弹框显示时间
      showPositionValuetext: "", // 弹框提示信息
      calculateEventActive: false, //测算是否满足条件可以点击
      position: "default", //弹框
      qcListData: {
        QuoteName: "", // 方案名称
        FinancingAmount: "", //融资金额
        PlanLoanDate: "", //计划投放日期
        LeaseMode: [], //租赁方式  joys-calculate  leaseMode
        AssetsNature: [], //租赁资产类型 joys-calculate  assetsNature
        LeaseAlgorithm: [], //报价算法
        LeaseCycle: [], // 收租周期
        LeaseTerm: "", //租赁期限（月）
        interestRate: "", //报价税率
        PoundageRatio: "", //手续费比例
        DepositRatio: "", //保证金比例
        PurchasePrice: "", //留购价

        // CorpusTax: "是", //本金是否计税 《默认是》
        // TaxRate: [], 
        // DownPaymentRatio: "", //首付款比例
        // DownPaymentAmount:"", //首付款金额  不填
        // SplitInterest: "否", //是否分段计息  《否》
        // PlanLoanAmount:"", // 投放金额/计划投放日期 《否》
        // HolidayRule:"", //节假日规则  《默认不考虑节假日》
        // RentDayRule:"", //收租日规则   默认 随起租日
        // RentDay:"", // 收租日
        // CalDaysRule: "days360", //期间天数计算规则
        // LeaseTimes:"", //总期次
        // InterestRateType: "固定", //利率类型  <固定>
        // BaseInterestRate:"", //基准利率
        // InterestRateRule: "", //	报价利率处理规则
        // DepositAmount:"", //保证金金额
        // DepositReturnMethod: [], //保证金退回方式
        // PoundageMode: "初级收取", //手续费收取方式  《初级收取》
        // PoundageAmount:"", //手续费总额
        // PoundageTaxRate //手续费税率 默认0
      },
      // TaxRateSelect: [
      //   [
      //     { value: "0", name: "0 %" },
      //     { value: "6", name: "6 %" },
      //     { value: "10", name: "10 %" },
      //     { value: "11", name: "11 %" },
      //     { value: "16", name: "16 %" },
      //     { value: "17", name: "17 %" }
      //   ]
      // ],
      LeaseModeSelect: [[{}]], //租赁方式
      AssetsNatureSelect: [[{}]], //租赁资产类型
      LeaseAlgorithmSelect: [[{}]], //报价算法
      LeaseCycleSelect: [[{}]], // 收租周期
      // DepositReturnMethodSelect: [[{}]]
    };
  },
  mounted () {
    setTimeout(() => {
      this.QueryEnum("joys-calculate", "leaseMode", this.LeaseModeSelect); //租赁方式
      this.QueryEnum("joys-calculate", "assetsNature", this.AssetsNatureSelect); //资产性质
      this.QueryEnum(
        "joys-calculate",
        "leaseAlgorithm",
        this.LeaseAlgorithmSelect
      ); //报价算法
      this.QueryEnum("joys-calculate", "leaseCycle", this.LeaseCycleSelect); //收租周期
      // this.QueryEnum("joys-calculate", "depositReturnMethod", this.DepositReturnMethodSelect );
    }, 500);
  },
  methods: {
    calculateEvent () {
      this.$axios({
        method: "put",
        url: "/joys-rest/joys-calculate//calculator/app/calculate",
        headers: {
          "AUTH-TOKEN": localStorage.getItem("AUTH-TOKEN"),
          "Content-Type": "application/json;charset=UTF-8"
        },
        data: {
          quoteName: this.qcListData.QuoteName,    //方案名称
          financingAmount: Number(this.qcListData.FinancingAmount), //融资金额
          planLoanDate: this.qcListData.PlanLoanDate, //计划投放日期 "2019-04-10",//必填
          leaseMode: this.qcListData.LeaseMode[0], //租赁方式
          assetsNature: this.qcListData.AssetsNature[0], //租赁资产类型  必填
          leaseTerm: Number(this.qcListData.LeaseTerm), //租赁期限（月）
          depositRatio: this.qcListData.DepositRatio / 100, //保证金比例
          poundageRatio: this.qcListData.PoundageRatio / 100, //手续费比例
          purchasePrice: Number(this.qcListData.PurchasePrice), //留购价

          // interestRateRule: this.qcListData.InterestRateRule / 100, //	报价利率处理规则
          // baseInterestRateId: "", //期数 必填
          // calDaysRule: "DAYS_360", //期间天数计算规则
          // corpusTax: true, //本金是否计税 《默认是》
          // depositReturnMethod: this.qcListData.DepositReturnMethod[0], //保证金退回方式
          // downPaymentRatio: this.qcListData.DownPaymentRatio / 100, //首付款比例
          // holidayRule: "NO", //节假日规则  《默认不考虑节假日》
          // loanList: [],
          // otherList: [],
          // planRentDate: "2019-04-10", //非必填
          // poundageMode: "EACH_LOAN", //手续费收取方式  《初级收取》
          // quoteCalculatorId: null, //必填，新增的时候默认为空，修改的时候传回主键
          // quoteCode: null, //非必填
          // quoteName: "测算移动端123333" + Date.parse(new Date()), //必填,需要给个默认值，手机端没有维护该字段的地方
          // quoteType: this.qcListData.LeaseAlgorithm[0], //必填，填leaseAlgorithm的值即可
          // rentList: [],
          quoteRuleList: [
            {
              interestRate: this.qcListData.interestRate / 100,  // 报价利率 必填
              leaseAlgorithm: this.qcListData.LeaseAlgorithm[0], //报价算法//必填，后面测算会用到
              leaseCycle: this.qcListData.LeaseCycle[0], //必填 收租周期
              leaseTime: 1, //必填，如果有多条需要排序，手机端给默认值：1
              // creationTs: 1554951284868, //必填,新增的时候默认为null，修改的时候传回创建时间
              // creatorId: "000", //必填,新增的时候默认为null，修改的时候传回创建人id
              // dataVersion: null, //必填,新增的时候默认为null，修改的时候传回数据版本
              // interestRateType: "FIXED", //必填，手机端给默认值：FIXED
              // rentDayRule: "LOAN_DAY", //必填，手机端给默认值：LOAN_DAY
              // quoteRuleId: "string", //必填,新增的时候默认为null，修改的时候传回主键
              // rentDay: this.qcListData.PlanLoanDate.substr(this.qcListData.PlanLoanDate.length - 2) 
              //必填，如果rentDayRule=LOAN_DAY，那么rentDay=planLoanDate的最后两位数字，否则自己填值
              // sourceBillId: "string", //必填,新增的时候默认为null，修改的时候传回sourceBillId
              // specificAmount: 0, //非必填
              // taxRate: null //非必填
            }
          ],
          // sourceBillId: null, //非必填
          // sourceBillType: "CALCULATOR", //必填,给默认值：CALCULATOR
          // splitInterest: false, //非必填 是否分段计息  《否》
          // taxRate: this.qcListData.TaxRate[0] / 100, //必填 报价税率
          // yearDays: 360, //必填，手机端给默认值：360
          // yearIrrDays: 360, //必填,如果calDaysRule=DAYS_360，yearIrrDays=360；否则yearIrrDays=365
          // dataVersion: null, //必填,新增的时候默认为null，修改的时候传回数据版本
          // creationTs: null, //必填,新增的时候默认为null，修改的时候传回创建时间
          // creatorId: null //必填,新增的时候默认为null，修改的时候传回创建人id
        }
      })
        .then(res => {
          this.QcResultInfo = res.data;
          setTimeout(() => {
            this.QcResultBox = true;
          }, 100);
        })
        .catch(error => {
          this.infoPosition("middle");
          this.showPositionValuetext = "测算失败";
        });
    },
    // 枚举查询
    QueryEnum (serviceName, typeName, dataArray) {
      this.$axios({
        method: "get",
        url: "/joys-rest/" + serviceName + "/enums/" + typeName + "/items",
        headers: {
          "AUTH-TOKEN": localStorage.getItem("AUTH-TOKEN"),
          "Content-Type": "application/json;charset=UTF-8"
        }
      })
        .then(res => {
          for (const key in res.data) {
            dataArray[0].push({
              name: res.data[key].label,
              value: res.data[key].value
            });
          }
          console.log(res.data, 'shuju')
          dataArray[0].splice(0, 1);
          if (typeName == "leaseAlgorithm") {
            dataArray[0].splice(dataArray[0].length - 4);
          }
        })
        .catch(error => {
          console.log(error, "枚举获取失败");
        });
    },

    // 错误信息提示
    infoPosition (position) {
      this.position = position;
      this.PositionValue = true;
    },
    // 测算结果关闭
    QcResultBoxClose () {
      this.QcResultBox = false;
      // this.qcListData = {
      //   FinancingAmount: "",
      //   PlanLoanDate: "",
      //   DownPaymentRatio: "",
      //   PurchasePrice: "",
      //   LeaseTerm: "",
      //   InterestRateRule: "",
      //   DepositRatio: "",
      //   PoundageRatio: ""
      // };
    },
    returnHistiy () {
      this.$router.goBack();
    }
  },
  computed: {
    qcListDataDom () {
      this.qcListDataDomNub =

        Number(Boolean(this.qcListData.QuoteName)) +
        Number(Boolean(this.qcListData.FinancingAmount)) +
        Number(Boolean(this.qcListData.PlanLoanDate)) +
        Number(Boolean(this.qcListData.LeaseMode[0])) +
        Number(Boolean(this.qcListData.AssetsNature[0])) +
        Number(Boolean(this.qcListData.LeaseAlgorithm[0])) +
        Number(Boolean(this.qcListData.LeaseCycle[0])) +
        Number(Boolean(this.qcListData.LeaseTerm)) +
        Number(Boolean(this.qcListData.interestRate));

      // Number(Boolean(this.qcListData.TaxRate[0])) +
      // Number(Boolean(this.qcListData.DownPaymentRatio)) +
      // Number(Boolean(this.qcListData.PurchasePrice)) +
      // Number(Boolean(this.qcListData.InterestRateRule)) +
      // Number(Boolean(this.qcListData.DepositReturnMethod[0])) +
    }
  },
  watch: {
    qcListDataDomNub (newVal, oldVal) {
      if (Number(newVal) === 9) {
        this.calculateEventActive = true;
      } else {
        this.calculateEventActive = false;
      }
    },
    // 根据投放日期获取期数id
    "qcListData.PlanLoanDate" (val) {
      if (val.length > 1) {
      }
    },
    "qcListData.interestRate" (val) {
      if (val > 36 || val < 0) {
        this.infoPosition("middle");
        this.showPositionValuetext = "报价利率应在0-36%";
      }
    },
    "qcListData.DepositRatio" (val) {
      if (val > 99 || val < 0) {
        this.infoPosition("middle");
        this.showPositionValuetext = "风险金比例应在0-100%";
      }
    },
    "qcListData.PoundageRatio" (val) {
      if (val > 99 || val < 0) {
        this.infoPosition("middle");
        this.showPositionValuetext = "手续费比例应在0-100%";
      }
    }
  }
};
</script>

<style scoped lang="less">
.quoteCalculate_box {
  z-index: 300;
  width: 100%;
  height: 100%;
  background: #f2f2f2;
  overflow: scroll;

  .quoteCalculate_head_box {
    width: 100%;
    height: 0.44rem;
    line-height: 0.44rem;
    background: #ffffff;
    position: fixed;
    z-index: 201;
    box-shadow: inset 0 -1px 0 0 rgba(207, 207, 207, 0.2);
    .quoteCalculate_head_return {
      // width: 100%;
      position: fixed;
      top: 0px;
      img {
        // width: 0.15rem;
        height: 0.205rem;
        padding-left: 0.085rem;
        padding-top: 0.02rem;
      }
      span {
        font-family: Regular;
        font-size: 0.17rem;
        color: #3e3e3e;
        letter-spacing: -0.41px;
        line-height: 0.22rem;
      }
    }
    p {
      font-family: PingFangSC-Semibold;
      font-size: 0.17rem;
      color: #3e3e3e;
      letter-spacing: -0.41px;
      height: 0.44rem;
      font-weight: 700;
      line-height: 0.44rem;
      text-align: center;
    }
    .quoteCalculate_save {
      width: 0.56rem;
      height: 0.32rem;
      line-height: 0.32rem;
      margin-top: -0.38rem;
      float: right;
      margin-right: 0.16rem;
      background: rgba(190, 148, 87, 0.25);
      border-radius: 4px;
      font-family: PingFangSC-Medium;
      font-size: 16px;
      color: #ffffff;
      letter-spacing: 0;
      text-align: center;
    }
    .quoteCalculate_font_active {
      background: #be9457;
    }
  }
  .scroll {
    overflow: hidden;
    height: 100%;
    background: #fff;
    .wrapper {
      overflow: hidden;
      top: 0.44rem;
      .quoteCalculate_top_box {
        height: 1.12rem;
        width: 100%;
        background: #ffffff;
        border-radius: 2px;
        overflow: hidden;
        .quoteCalculate_top_img {
          width: 34%;
          float: left;
          // display: inline-block;
          text-align: right;
          height: 100%;
          line-height: 100%;
          img {
            position: relative;
            top: 50%;
            margin-top: -0.34rem;
            height: 0.67rem;
          }
        }
        .quoteCalculate_top_text {
          float: left;
          width: 60%;
          overflow: hidden;
          margin-top: -0.04rem;
          transform: scale(0.84);
          i {
            font-family: PingFangSC-Regular;
            font-size: 0.15rem;
            color: rgba(0, 22, 22, 0.85);
            letter-spacing: -0.4px;
            text-align: center;
            font-weight: 700;
          }
          p {
            font-family: PingFangSC-Regular;
            font-size: 0.1rem;
            color: rgba(0, 22, 22, 0.65);
            letter-spacing: -0.4px;
          }
        }
      }
      .quoteCalculate_content {
        .quoteCalculate_content_item {
          h3 {
            font-family: PingFangSC-Regular;
            font-size: 0.14rem;
            height: 0.4rem;
            color: #9c9795;
            letter-spacing: -0.34px;
            line-height: 0.4rem;
            padding-left: 0.22rem;
            font-family: PingFangSC-Regular;
            background: #f2f2f2;
          }
          .quoteCalculate_item_table {
            background: #ffffff;
            padding-left: 0.06rem;
            .quoteCalculate_item_table_sign {
              height: 0.4rem;
              width: 0.16rem;
              // background: red;
              display: flex;
              align-items: center;
              justify-content: center;
              float: left;
              .vux-x-icon {
                fill: #f70968;
              }
            }
            .quoteCalculate_item_table_time {
              border-bottom: 0.5px solid #e6e6e6;
            }

            .quoteCalculate_item_table_select {
              margin-left: 0.16rem;
              border-bottom: 0.5px solid #e6e6e6;
            }
            .quoteCalculate_item_table_span {
              margin-left: 0.16rem;
              height: 0.4rem;
              line-height: 0.4rem;
              border-bottom: 0.5px solid #e6e6e6;

              span {
                font-family: PingFangSC-Regular;
                font-size: 0.15rem;
                color: #443a38;
                letter-spacing: -0.36px;
                line-height: 0.18rem;
                width: 1.25rem;
                display: inline-block;
                font-family: PingFangSC-Regular;
              }
              input {
                font-family: PingFangSC-Regular;
                font-size: 0.13rem;
                color: rgba(0, 22, 22, 0.85);
                letter-spacing: -0.36px;
              }
              input::placeholder {
                font-family: PingFangSC-Regular;
                font-size: 0.15rem;
                color: #c8c5c4;
                letter-spacing: -0.36px;
              }
              i {
                font-style: normal;
                font-family: PingFangSC-Regular;
                font-size: 0.13rem;
                color: rgba(0, 22, 22, 0.85);
                letter-spacing: 0;
                line-height: 0.4rem;
                float: right;
                height: 100%;
                margin-right: 0.18rem;
              }
            }
            // .quoteCalculate_item_table_border {
            //   border: none;
            // }
          }
        }
        .quoteCalculate_item_table_bjll_box {
          background: #fff;
          height: 1.06rem;
          .quoteCalculate_item_table_bjll {
            margin: 0 0.16rem;
            border-bottom: 1px solid #e6e6e6;
            padding-bottom: 0.06rem;
            h4 {
              height: 0.23rem;
              padding-top: 0.11rem;
              font-family: PingFangSC-Regular;
              font-size: 0.16rem;
              color: rgba(0, 22, 22, 0.85);
              text-align: left;
            }
            input {
              height: 0.5rem;
              width: 1.4rem;
              overflow: hidden;
              font-family: PingFangSC-Regular;
              font-size: 0.3rem;
              color: rgba(0, 22, 22, 0.85);
              caret-color: #2f86f6;
              text-align: left;
              line-height: 0.5rem;
            }
            em {
              font-family: PingFangSC-Regular;
              font-size: 0.22rem;
              color: rgba(0, 22, 22, 0.85);
              text-align: left;
              line-height: 0.5rem;
            }
          }
        }
      }
      .quoteCalculate_font {
        height: 1.2rem;
        display: flex;
        align-items: center;
        justify-content: center;
        button {
          height: 0.47rem;
          background: #a8becf;
          border-radius: 0.1rem;
          width: 90%;
          font-family: PingFangSC-Regular;
          font-size: 0.15rem;
          color: #ffffff;
          text-align: center;
        }
        span {
          display: none;
        }
      }
    }
  }
}
</style>
